import React, { useEffect, useState } from "react";
import type { FC } from "react";
import { Card, Tag, Button, Modal, message } from "antd";

import {
  EditOutlined,
  CopyOutlined,
  DeleteOutlined,
  LineChartOutlined,
  StarOutlined,
  StarTwoTone,
  ExclamationCircleFilled,
} from "@ant-design/icons";
import styles from "./index.module.scss";
import { useLocation, useOutletContext } from "react-router-dom";
interface Props {
  status: number;
}
interface DataItem {
  _id: string;
  title: string;
  isPublished: boolean;
  isStar: boolean;
  answerCount: number;
  createdAt: string;
  isDeleted: boolean;
}
/**
 * 
 * @returns 
 *
 *

 */

const QuestionCard: FC<Props> = ({ status = 2 }) => {
  // const location = useLocation();

  const { dataList } = useOutletContext<{ dataList: DataItem[] }>();
  console.log(dataList, "dataList");

  const [filteredData, setFilteredData] = useState(dataList);
  const { confirm } = Modal;
  const copy = () => {
    console.log(111);
  };
  const deleteQuestion = (_id: string) => {
    console.log(_id);

    confirm({
      title: "确定删除该问卷?",
      icon: <ExclamationCircleFilled />,
      okText: "确定",
      cancelText: "取消",

      onOk() {
        message.success("删除成功");
        console.log("确定");
      },
      onCancel() {
        console.log("取消");
      },
    });
  };
  useEffect(() => {
    if (status === 1) {
      setFilteredData(dataList.filter((item: DataItem) => item.isStar));
    } else {
      setFilteredData(dataList);
    }
  }, [status]);
  return (
    <div className={styles.QuestionCard}>
      {filteredData.map((item: DataItem) => {
        return (
          <Card
            key={item._id}
            size="small"
            title={
              <div>
                <StarTwoTone
                  twoToneColor="#fc3d49"
                  style={{ display: item.isStar ? "inline-block" : "none" }}
                />
                <span style={{ marginLeft: "5px" }}>{item.title}</span>
              </div>
            }
            extra={
              <div className={styles["card-extra"]}>
                <Tag color={item.isPublished ? "blue" : ""}>
                  {item.isPublished ? "已发布" : "未发布"}
                </Tag>
                <span>答卷:{item.answerCount}</span>
                <span>{item.createdAt}</span>
              </div>
            }
            className={styles["card-item"]}
          >
            <div className={styles["card-content"]}>
              <div>
                <Button color="default" variant="text" size="small">
                  <EditOutlined />
                  编辑问卷
                </Button>
                <Button
                  color="default"
                  variant="text"
                  disabled={item.isDeleted}
                  size="small"
                >
                  <LineChartOutlined />
                  统计问卷
                </Button>
              </div>
              <div>
                <Button
                  color={item.isStar ? "primary" : "default"}
                  variant="text"
                  size="small"
                >
                  <StarOutlined />
                  {item.isStar ? "取消标星" : "标星"}
                </Button>
                <Button
                  color="default"
                  variant="text"
                  size="small"
                  onClick={copy}
                >
                  <CopyOutlined />
                  复制
                </Button>
                <Button
                  color="default"
                  variant="text"
                  size="small"
                  onClick={() => deleteQuestion(item._id)}
                >
                  <DeleteOutlined />
                  删除
                </Button>
              </div>
            </div>
          </Card>
        );
      })}
    </div>
  );
};
export default QuestionCard;
